//绘制坐标系
draw({
  id: "#svg",
  color: "#abf",
  yAxis: false,
});

//准备数据
const data = {
  title: "渡一前端面试集锦周访问量",
  xLabel: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  values: [150, 300, 250, 450, 200, 500, 500],
};

//确定数据范围上限  max(500)->600 , max(450)-->500
//找出最大值
const maxValue = data.values.reduce((e1, e2) => Math.max(e1, e2));
const len = (maxValue + "").length;
const unit = Math.pow(10, len - 1);
const upLimit = maxValue % unit == 0 ? maxValue + unit : maxValue / unit + unit;

//计算数据比例 200*200的坐标系， 放最大值600的数据，放缩比例2/6
const ratio = 200 / upLimit;

//绘制准备
const svg = document.querySelector("#svg");
const NS = "http://www.w3.org/2000/svg";

//绘制标题
const titleText = document.createElementNS(NS, "text");
titleText.innerHTML = data.title;
titleText.classList.add("title");
titleText.setAttribute("x", 10);
titleText.setAttribute("y", 12);
svg.appendChild(titleText);

//绘制y轴数值， 与上限有关
const yDataSpace = upLimit / 5;
let g = document.createElementNS(NS, "g");
g.classList.add("y-text");
for (let i = 0; i <= 5; i++) {
  const yText = document.createElementNS(NS, "text");
  yText.setAttribute("x", 20);
  yText.setAttribute("y", 225 - i * 40);
  yText.innerHTML = i * yDataSpace;
  g.appendChild(yText);
}
svg.appendChild(g);

//绘制x轴竖线
const xSpace = 200 / 7;
let d = "";
for (let i = 0; i <= 7; i++) {
  d += `M${25 + i * xSpace} 225V230`;
}
let path = document.createElementNS(NS, "path");
path.setAttribute("d", d);
path.classList.add("x-line");
svg.appendChild(path);

//绘制x轴刻度标签（文字）
g = document.createElementNS(NS, "g");
g.classList.add("x-text");
data.xLabel.forEach((txt, i) => {
  const text = document.createElementNS(NS, "text");
  text.setAttribute("x", 25 + i * xSpace + xSpace / 2);
  text.setAttribute("y", 235);
  text.innerHTML = txt;
  g.appendChild(text);
});
svg.appendChild(g);

//绘制数据圆点及折线
const g1 = document.createElementNS(NS, "g");
const g2 = document.createElementNS(NS, "g");
g1.classList.add("data-line");
g2.classList.add("data-circle");
svg.appendChild(g1);
svg.appendChild(g2);
d = "";
data.values.forEach((val, i) => {
  if (i == 0) {
    d += "M";
  } else {
    d += "L";
  }
  d += `${25 + i * xSpace + xSpace / 2} ${225 - val * ratio}`;

  const circle = document.createElementNS(NS, "circle");
  circle.setAttribute("cx", 25 + i * xSpace + xSpace / 2);
  circle.setAttribute("cy", 225 - val * ratio);
  circle.setAttribute("value", val);

  g2.appendChild(circle);
});
path = document.createElementNS(NS, "path");
path.setAttribute("d", d);
g1.appendChild(path);

//设置鼠标移入时的数据展示，采用事件委托方式
const tag = document.querySelector(".tag");
svg.onmouseover = function (e) {
  if (e.target.tagName === "circle") {
    console.log(e.clientX, e.clientY);
    tag.style.left = e.clientX + 5 + "px";
    tag.style.top = e.clientY + 5 + "px";
    tag.style.display = "block";
    tag.innerHTML = e.target.getAttribute("value");
    // console.log(e.target.getAttribute('cx'),e.target.getAttribute('cy'));
    e.target.onmouseout = function () {
      tag.style.display = "none";
      this.onmouseout = null;
    };
  }
};
